<template>
  <div class="information">
    <div class="topnav">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="quit"
      >
        <template #right>
          <div @click="toggle">
            {{ flag ? "编辑" : "完成" }}
          </div>
        </template></van-nav-bar
      >
    </div>
    <div class="nav-bg">
      <img src="../assets/images/bg.png" alt="" />
    </div>
    <div class="my">
      <div class="list">
        <div class="touxiang">头像</div>
        <div>
        <div class="tximg" :style="{backgroundImage: `url(${information.userImg})`}">
          <van-uploader :after-read="changeTx" :disabled="flag" />
        </div>
        </div>
      </div>
      <div class="list">
        <van-field
          label="用户id"
          :value="information.userId"
          input-align="right"
          readonly
        />
      </div>
      <div class="list">
        <van-field
          v-model="nickName"
          :readonly="flag"
          label="昵称"
          input-align="right"
        />
      </div>
      <div class="list">
        <van-field
          v-model="desc"
          :readonly="flag"
          rows="1"
          autosize
          label="留言"
          type="textarea"
          input-align="right"
          :placeholder="
            information.desc ? information.desc : '这家伙很懒，什么都没有输入'
          "
        />
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "Information",
  data() {
    return {
      information: [],
      flag: true,
      nickName: "",
      desc: "",
      fileList: [
        
      ],
      userImg:""
    };
  },
  methods: {
    quit() {
      this.$router.go(-1);
    },
    toggle() {
      // this.flag = !this.flag;
      if (this.flag) {
        this.flag = false;
      } else if (this.flag === false) {
        this.changeName(this.nickName);
        this.changeDesc(this.desc);
        this.flag = true;
      }
    },
    // 获取用户的个人信息
    getInformation() {
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "GET",
        url: "/findAccountInfo",
        params: {
          tokenString: token,
        },
      })
        .then((res) => {
          
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
          this.information = res.data.result[0];
          this.nickName = res.data.result[0].nickName;
          this.desc = res.data.result[0].desc;
        })
        .catch((err) => {
          
        });
    },
    // 修改用户昵称
    changeName(nickname) {
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "POST",
        url: "/updateNickName",
        data: {
          tokenString: token,
          nickName: nickname,
        },
      })
        .then((res) => {
          
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
        })
        .catch((err) => {
          
        });
    },
    // 修改用户简历
    changeDesc(desc) {
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "POST",
        url: "/updateDesc",
        data: {
          tokenString: token,
          desc: desc,
        },
      })
        .then((res) => {
          
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
        })
        .catch((err) => {
          
        });
    },
    // 修改用户头像
    changeTx(file){
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');

      let tokenString = this.$cookies.get("TOKEN");

      this.axios({
        method: "POST",
        url: "/updateAvatar",
        data: {
          tokenString,
          serverBase64Img: base64,
          imgType: file.file.type.split(/\//)[1]
        },
      })
        .then((res) => {

          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);

            return;
          }
          
          this.$toast(res.data.msg);
          if (res.data.code === 'H001' && res.data.result[0] === 1) {
            this.information.userImg = res.data.userImg;
          }
         

          
        })
        .catch((err) => {
          
        });
    }
  },
  created() {
    this.getInformation();
  },
};
</script>

<style lang="less" scoped>
.topnav {
  position: sticky;
  top: 0;
  /deep/ .van-nav-bar__text {
    color: #0c34ba;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #0c34ba;
  }
}
.nav-bg {
  height: 100px;
  img {
    width: 100%;
  }
}
.my {
  background-color: white;
  position: fixed;
  top: 180px;
  left: 0;
  right: 0;
  margin: 10px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  .list {
    display: flex;
    align-items: center;
    .touxiang {
      color: #646566;
      text-align: left;
      word-wrap: break-word;
      font-size: 0.37333rem;
      margin-left: 16px;
    }
    .tximg {
      margin-left: auto;
      margin-right: 15px;
      width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: pink;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
      /deep/ .van-uploader__upload {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        opacity: 0;
      }
      /deep/ .van-uploader__wrapper {
    width: 100%;
    height: 100%;
  }
  
    }
    div {
      flex: 1;
      align-items: center;
    }
    /deep/ .van-icon__image {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  
}
</style>